<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="basePath" scope="request" value="<%=request.getContextPath()%>"/>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>资讯管理-融媒服务</title>
	
	<c:import url="/public/head-tag.jsp"/>
    <link rel="stylesheet" href="/pages/assets/css/service/service.css" />
    <style>
    	.title{line-height:2;}
    </style>
</head>
<body>
	
    <c:import url="/public/header.jsp"/>
	
    <section class="container">
    	
		
		
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">资讯管理</h3>
    			<div class="content-action">
    				<a href="/demo/web/news/createPage" class="action-item icon-add" title="发布文章">发布文章</a>
    				<a href="/demo/web/newsType/createSavePage" class="action-item icon-config" title="分类管理">分类管理</a>
    			</div>
    		</div>
    		<div class="content-main">
				<section class="content-item" data-template="item/list" id="box">
					<div class="content-item-top">
						<form action="/demo/web/news/list" method="get" autocomplete="off">
						    <input type="hidden" name="page"/>
							<div class="filter-item">
								<label for="">类别</label>
								<select name="role" class="select">
									<c:forEach items="${selectList}" var="option">
									   <option value="${option.id}">${option.title}</option>
                                    </c:forEach>
                                    <option value="-1">所有</option>
								</select>
							</div>
							<div class="filter-item">
								<label for="">时间</label>
								<input type="text" class="text text-100" placeholder="开始时间" name="startTime" date-range/>
								<span>至</span>
								<input type="text" class="text text-100" placeholder="结束时间"  name="endTime" date-range  />
							</div>

							<div class="filter-item">
								<label for="">搜索</label>
								<input type="search" class="text text-150" name="title" placeholder="输入关键字" id="search-input"/>
								<input type="submit" class="btn btn-search"  value="搜索" id="search-button"/>
						    	<input type ="hidden" name = "page" value="1" >
							</div>
						
						</form>
					</div>
					
					<div class="content-item-block">
							<table class="table">
								<thead>
								<tr>
									<th style="width:10%">发布时间</th>
									<th style="width:10%">发布人</th>
									<th style="width:10%">类别</th>
									<th style="width:25%">新闻</th>
									<th style="width:10%">点击</th>
									<th style="width:10%">权重</th>
									<th style="width:10%">状态</th>
									<th style="width:15%" class="align-center">操作</th>
								</tr>
								</thead>
								<tbody id="sortable">
									<tr>
										<td class="align-center" colspan="7">
											<div class="loading">加载中...</div>
										</td>
									</tr>
								</tbody>
							</table>
					</div>
					
				</section>
    		</div>
    	</div>
    </section>
    
   <script id="item/list" type="text/template">
        {{if !list || list.length==0}}
		<tr><td colspan="7">没有记录！</td></tr>
		{{else}}
			{{each list as item}}
				<tr>
					<td>
						<p>{{ item.timeL | dateFormat:'yyyy-MM-dd' }}</p>
						<p class="value-note">{{ item.timeL | dateFormat:'HH:mm'}}</p>
					</td>
					<td>{{item.oper}}</td>
					<td>{{item.typeTitle}}</td>
					<td>
						<p>
							<a class="title" href="{{item.url}}" target="_blank">{{ item.title }}</a>
							{{ if item.is_top==1 }}
							<span class="label label-red">轮播</span>
                 			{{/if}}
						</p>
					</td>
                    <td>{{item.readCount}}</td>
                    <td>{{item.sort}}</td>
					<td>  
                        {{ if item.status==0}}
						   <span class="state state-red">未发布</span>
						{{/if}}
						{{if item.status==1}}
						   <span class="state">已发布</span>
                        {{/if}}
                        </td>
					<td class="align-center">
                        {{if item.openurl != item.url}}
                            <a href="{{item.openurl}}"  action="item.preview" class="action-link" target="_blank">预览</a>                      
 						 {{/if}}
                          {{if  item.openurl == item.url}}
						    <a href="{{item.url}}" action="item.preview" class="action-link" target="_blank">预览</a>
                        {{/if}}                     
                         <a href="javascript:;" action="item.edit" data-params="{{item | pick:'id:id,title,sort,is_top' | toJSON}}"   class="action-link">修改状态</a>
						 <a href="javascript:;" action="item.changeState" data-params="{{item | pick:'id:id,status' | toJSON}}"  class="action-link"> {{if item.status==1}}下线 {{/if}} {{ if item.status==2 || item.status==0}}上线{{/if}}</a>
                         <a href="javascript:;" action="item.remove" data-params="{{item | pick:'id:id' | toJSON}}"  class="action-link">删除</a>
						 <a href="/demo/web/news/editPage?id={{item.id}}"  class="action-link">编辑</a>
                    </td>
				</tr>
			{{/each}}
		{{/if}}
    </script>
     <script type="text/template" id="item/edit" note="活动快速修改">
    	<form action="/demo/web/news/updateSave" method="post">
    		{{if title}}
			<div class="form-row" >
				<span class="row-label">新闻：</span>
				<div class="row-content">
					<p class="row-value">{{title}}</p>
				</div>
			</div>
			{{/if}}
			<!--<div class="form-row" >
				<span class="row-label">状态：</span>
				<div class="row-content">
					<p class="row-value">
						<input type="checkbox" id="isUse" name="isUse" value="1" {{if is_top!==0}}checked="checked"{{/if}}/>
						<label for="is_top">轮播</label>
					</p>
				</div>
			</div>-->
			<div class="form-row">
				<span class="row-label">顺序：</span>
				<div class="row-content">
					<input type="text" class="text" name="sort"  value="{{sort||0}}" iname="顺序" ipattern="^\d+(\.\d+)?$"/>
					<p class="value-note">数值越大，该项目越靠前</p>
				</div>
			</div>
			{{if id}}
				<input type="hidden" name="id" value="{{id}}" />
			{{/if}}
    	</form>
    </script>
    
    <script type="text/template" id="item/remove" note="删除">
    	<style>
    		.remove-content{padding:10px;color:red;}
    	</style>
    	<form action="/demo/web/news/deleteSave" method="post">
			<div class="align-center remove-content">确定要删除该活动吗？</div>
			<input type="hidden" name="id" value="{{id}}" />
    	</form>
    </script>
    
    <script type="text/template" id="item/changeItemState" note="上下线">
    	<form action="/demo/web/news/updateStatus" method="post">
			<div class="align-center">确定要<b class="state-red">{{if status==1}}下线{{else}}上线{{/if}}</b>该活动吗？</div>
			<input type="hidden" name="id" value="{{id}}" />
            <input type="hidden" name="status" value="{{status}}" />
    	</form>
    </script>
    
   <script src="/pages/assets/js/libs/LAB/LAB.js"></script>
   <script>
   		var baseUrl="/pages/assets/js/libs/";
   		$LAB.require({
   			baseUrl:baseUrl,
   			scripts:[
   				["artTemplate/artTemplate2.js","artTemplate/artTemplate.helpers.js"],
  				["form/jquery.formCheck.js?v=2015","form/jquery.ajaxSubmit.js","form/jquery.common.js?v=2015"],
	   			["moment.min.js","jquery-date-range-picker/daterangepicker.css","jquery-date-range-picker/jquery.daterangepicker.js"],
	   			["dialog/mui-dialog.css","dialog/dialog-plus-min.js"],
	   			["pager/theme-simple.css","pager/jquery.pager.js"]
   			]
   		},function(){
   			
    		var App={
    			alert : function(){
    				alert(arguments[0]);
    			},
    			initPlugins:function(){
    				
    			},
    			initDatePicker:function(){
    				var $dates=$("[date-range]").dateRangePicker({
						separator : '至',
						getValue: function(){
							return '';
						},
						setValue: function(s,s1,s2){
							return false;
						}
					})
					.on("datepicker-apply",function(e,date){
						$dates.eq(0).val(date.date1.format('yyyy-MM-dd'));
						$dates.eq(1).val(date.date2.format('yyyy-MM-dd'));
						$(this).parents("form:first").submit()
					})
    			},
    			reloadItems:function(){
    				$("#box").reload();
    			},
    			editItem:function(data){
    				var id="item/edit";
    				var title="修改状态";
					var content=template(id,data);
					var idialog=dialog({
						id : id,
						zIndex: 5,width:420,
						padding:"0 20px",
						onshow:function(){
						
							//解决当表单中只有一个input:text时按回车自动提交form的问题
							this.getContent().find("form").on("submit",function(e){
								e.preventDefault();
								return false;
							});
						},
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"提交修改",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.ajaxSubmit({
										onSuccess :function(result){
											var code=result.code;
											if(code==200){
												idialog.remove();
												App.reloadItems();
											}
											else{
												var msg=result.msg || "提交失败！";
												App.alert(msg);
											}
										}
									})
									return false;
								}
							}
						]
					})
					idialog.title(title).content(content).showModal();
    			},
    			removeItem:function(data){
    				var id="item/remove";
    				var title="警告";
    				var content=template(id,data);
					var idialog=dialog({
						id : id,
						zIndex: 5,width:300,
						padding:"40px 20px",
						title:title,
						content:content,
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"确定删除",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.ajaxSubmit({
										onSuccess :function(result){
											var code=result.code;
											if(code==200){
												idialog.remove();
												App.reloadItems();
											}
											else{
												var msg=result.msg || "提交失败！";
												App.alert(msg);
											}
										}
									})
									return false;
								}
							}
						]
					});
					idialog.showModal();
    			},
    			previewPage:function(url){
    				var settings='toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=420, height=500'
    				var windowWidth=$(window).width();
    				var left=windowWidth/2-160;
    				settings+=',top=100,left='+left;
    				window.open(url,"_blank",settings)
    			},
    			changeItemState:function(data){
    				var id="item/changeItemState";
    				var title="警告";
    				var content=template(id,data);
					var idialog=dialog({
						id : id,
						zIndex: 5,width:300,
						padding:"40px 20px",
						title:title,
						content:content,
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"提交修改",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.ajaxSubmit({
										onSuccess:function(result){
											var code=result.code;
											if(code==200){
												idialog.remove();
												App.reloadItems();
											}
											else{
												var msg=result.msg || "提交失败！";
												App.alert(msg);
											}
										}
									})
									return false;
								}
							}
						]
					})
					idialog.showModal();
    			},
    			init : function(){
					this.initPlugins();
					this.initDatePicker();
					$("[data-template]").ajaxLoad();
					
					$("body").on("click","[action]:not(form)",function(){
						var $this=$(this);
						var action=$this.attr("action");
						var data=$this.data("params");

						if(action=="item.remove"){
							App.removeItem(data);
						}
						if(action=="item.edit"){
							App.editItem(data);
						}
						if(action=="item.preview"){
							App.previewPage($this.attr('href'));
						}
						if(action=="item.changeState"){
							App.changeItemState(data);
						}
						
						return false;
					})
    			}
    		}
    		App.init();
   		})
    </script>
    </body>
</html>